<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册博客园</title>
    <style>
        [name="headPicture"]{
           text-align: center;
        }
        table{
            margin-left: 350px;
        }
        input{
            border-color: cornflowerblue;
            margin: 4px;
        }
        td{
            collapse: 50px;
        }
        tr td:first-child{
            text-align: right;
        }
    </style>
</head>
<body>
<div name="headPicture"><img src="image/logo.jpg">
    <img src="image/banner.jpg">
</div>
<span style="color: blue;margin-left: 260px">
    新用户注册
</span>
<hr style="background-color: blue;width:550px" size="3px" />
     <!--提交方式       提交的地址              提交表单是触发该方法-->
<form method="post" action="http://localhost:63342/newYears/day25-js-height/login.html?_ijt=rv7cdhk90fvv50kbnsc79j5cra" onsubmit="return checkAllInfo();">
    <table>
        <tr>
            <td>用户名:</td>
            <td>
                <input type="text" id="userInfo" onblur="checkUser();">
            </td>
            <td><!--失去焦点检查用户名格式输入是否正确-->
                <span style="color: red; font-size: 8px" id="user"></span>
            </td>
        </tr>
        <tr>
            <td>密码:</td>
            <td>
                <input type="password">
            </td>
        </tr>
        <tr>
            <td>确认密码:</td>
            <td>
                <input type="password">
            </td>
        </tr>
        <tr>
            <td>电子邮箱:</td>
            <td>
                <input type="email">
            </td>
        </tr>
        <tr>
            <td>手机号码:</td>
            <td>
                <input type="text">
            </td>
        </tr>
        <tr>
            <td>生日:</td>
            <td>
                <input type="date">
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                                                            <!--提交方式-->
                <input type="image" src="image/register.jpg" id="submit">
            </td>
        </tr>
    </table>
</form>
</body>
</html>
<script>
    //检查用户名输入格式
    function checkUser() {
        let user = document.getElementById("userInfo").value;
        //创建正则表达式 字母开头4-16位的数组或者字母
        let check = /^[a-zA-Z][a-zA-Z0-9]{3,15}$/;
        if (check.test(user)){
            document.getElementById("user").innerHTML = "<img src='image/gou.png'>"
            return true;
        }else {
            document.getElementById("user").innerText = "用户名格式错误";
            return false;
        }
    }
    //检查信息是否输入正确
    function checkAllInfo() {
        //设置按钮的提交方式为true
        return checkUser();
    }
    alert("登录成功");
</script>



























